<template>
	<view class="aa">
		<view v-if="authorized">
			<view class="head-container">
				<image :src="avatar" mode="aspectFill" class="img-avatar"></image>
				<view class="info-container">
					<view class="nick-containeer">
						<text class="txt-nick">{{nick + "-" + "[" + uTypes[type] + "]"}}</text>
						<image :src="badges[type]" mode="widthFix" class="img-badge"></image>
					</view>
					<text class="txt-user">{{user + ":" +email}}</text>
				</view>
			</view>

			<text class="iconfont icon-zhuxiao-copy ic-zhuxiao" @click="clickLogout"></text>
			<view class="data-container">
				<view class="data-title" @click="clickSwitch">
					<text class="data-title-name">我发布的7篇文章</text>
					<text
						:class="status.visible? 'iconfont icon-arrow-down-filling-copy' : 'iconfont icon-arrow-down-filling'"></text>
				</view>
				<scroll-view v-if="status.visible" scroll-x class="scroll" scroll-with-animation="true">
					<view class="scroll-item">123</view>
				</scroll-view>
			</view>
			<view class="data-container">
				<!-- 	<dialog-shell ref="add-shell" :title="'添加'+which"></dialog-shell> -->
				<dialog-shell ref="add_shell" title="添加类别" @confirm="confirmAdd">
					<view style="margin:  10rpx;">
						<input type="text" placeholder="请输入新的名称" focus style="padding-left: 15rpx;"
							@input="inputGetValue">
					</view>
				</dialog-shell>

				<dialog-shell ref="update_shell" title="修改类别名称" @confirm="confirmUpdate">
					<view style="margin:  10rpx;">
							<input type="text" placeholder="请输入新的名称" :value="oldName" focus style="padding-left: 15rpx;"
												@input="inputGetValue">
					</view>
				</dialog-shell>
			</view>

			<view class="data-container">
				<view class="data-title" @click="clickSwitch(2)">
					<text class="data-title-name">我点赞的{{myGoodBlogs.length}}篇文章</text>
					<text
						:class="status[2].visible?'iconfont icon-arrow-down-filling-copy' : 'iconfont icon-arrow-down-filling'"></text>
				</view>
				<scroll-view v-if="status[2].visible" scroll-x class="scroll" scroll-with-animation="true">
					<view class="scroll-item" v-for="(blog,index) in myGoodBlogs" :key="'g_'+blog.id"
						@click="clickGoBlog(blog.id)">
						<image :src="blog.picture" mode="aspectFill"></image>
						<text>{{blog.title}}</text>
					</view>

			</view>
			<view class="data-container">
							<view class="data-title" @click="clickSwitch(3)">
								<text class="data-title-name">管理的{{myTags.length}}个标签</text>
								<text
									:class="status[3].visible? 'iconfont icon-arrow-down-filling-copy' : 'iconfont icon-arrow-down-filling'"></text>
							</view>
							<view class="data-list" v-if="status[3].visible">
								<view class="data-item" v-for="(t, index) in myTags" :key="t.id">
									<text class="data-item-name" @click="clickUpdateCategory(t.id,t.name)">{{t.name}}</text>
									<text :class="t.count==0 ? 'data-item-btn' : 'data-item-count'"
										@click="clickDelete(t.id,t.name)">{{t.count == 0 ? 'X' :t.count}}</text>
								</view>
			
								<view class="data-item">
									<text class="iconfont icon-tianjia ic-add" @click="clickAdd"></text>
								</view>
			
							</view>
						</view>
					</view>

			<login-dialog ref="login" @afterLogin="afterLogin"></login-dialog>
		</view>
</template>

<script>
	let app = getApp()
	let page = 0
	let newName = ""
	let updateId = ""
	export default {
		data() {
			return {
				authorized: app.globalData.token.length > 0,
				avatar: this.$params.host + app.globalData.avatar,
				nick: app.globalData.nickName,
				type: app.globalData.type,
				uTypes: ["管理员", "认证博主", "普通会员"],
				badges: ["../../static/icons/badge0.png", "../../static/icons/badge1.png",
					"../../static/icons/badge2.png"
				],
				user: app.globalData.userName,
				email: app.globalData.email,
				status: {
					visible: false
				}
			}
		},
		mounted() {
			this.authorized = app.globalData.token.length > 0
			if (!this.authorized) {
				this.$refs.login.show()
			}
		},
		onLoad() {
			this.$noti.add(this.$params.noti_login_status, this.afterLogin, this);

			console.log(this.status[0]);
			if (app.globalData.token == 0)
				this.isLogin = false;
			else
				this.isLogin = true;


		},
		onUnload() {
			this.$noti.remove(this.$params.noti_login_status, this)
		},
		onShow() {
			this.myGoodBlogs = uni.getStorageSync(this.$params.key_good_ids);
			console.log(this.myGoodBlogs);
			if (!this.isLogin) {
				return;
			}
			this.loadData();
		},

		methods: {
				getMyTags() {
							this.myTags = [];
							let url = this.$params.host + this.$params.action_tags
							this.$request.get(url, res => {
			
								res.data.forEach(async (t) => {
									let r = await this.$request.requestAsync(url + t.id + "/blogs")
									let tag = {
										id: t.id,
										name: t.name,
										count: r.data.data.length
									}
									this.myTags.push(tag);
								})
			
							}, () => {})
						},
			},
			afterLogin() {

				this.authorized = app.globalData.token.length > 0
				this.nick = app.globalData.nickName
				this.type = app.globalData.type
				this.user = app.globalData.userName
				this.email = app.globalData.email
				this.avatar = this.$params.host + this.globalData.avatar
			},
			getCategories() {
				this.categories = []
				//todr:首先检查用户身份，只有管理员才能请求类别数据
				let url = this.$params.host + this.$params.action_categories
				this.$request.get(url, res => {
					console.log(res.data);
					url = this.$params.host + this.$params.action_category_count
					res.data.forEach(async (c) => {
						let r = await this.$request.requestAsync(url + c.id)
						if (r.data.success) {
							let category = {
								id: c.id,
								name: c.name,
								count: r.data.data
							}
							this.categories.push(category)
						}

					})
				}, () => {})
			},
			confirmAdd() {
				//1.检查数据的合法性
				if (newName.trim().length == 0) {
					uni.showToast({
						title: '请输入类别名称',
						icon: 'none'
					});
					return
				}
				//2.标签，先确认类别或标签
				//3.发送请求
				let url = this.$params.host + this.$params.action_category_add
				let data = {
					"token": app.globalData.token,
					"name": newName
				}
				this.$request.requestAsync(url, data, 'POST')
					.then(res => {
						if (!res.data.success) {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
						} else {
							let category = {
								id: res.data.data.id,
								name: res.data.data.name,
								count: 0
							}
							this.categories.push(category)
						}
						newName = ""
					})
					.catch(err => {
						newName = ""
						console.log(err);
					})
			},
			inputGetValue(e) {
				newName = e.detail.value
			},
			clickAdd() {
				this.$refs.add_shell.show()
			},
			clickUpdateCategory(id, name) {
				newName = name
				updateId = id
				this.oldName = name
				this.$refs.update_shell.show()
			},
			clickDelete(id, name) {
				let url = this.$params.host + this.$params.action_category_delete + id
				let data = {
					"token": app.globalData.token
				}
				uni.showModal({
					title: '确认',
					content: '确定要删除' + name + '吗？',
					showCancel: true,
					cancelText: '再想想',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.$request.deleteParams(url, data, res => {
								if (res.success) {
									this.categories = this.categories.filter(c => c.id != id)
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none'
									});
								}
							}, () => {})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},



			confirmUpdate() {
				if (newName.trim().length == 0) {
					uni.showToast({
						title: '请输入类别名称',
						icon: 'none'
					});
					return
				}
				let url = this.$params.host + this.$params.action_category_put + updateId
				let data = {
					"token": app.globalData.token,
					"name": newName
				}
				this.$request.requestAsync(url, data, 'PUT')
					.then(res => {
						if (!res.data.success) {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
						} else {
							this.categories.forEach(c => {
								if (c.id == res.data.data.id) {
									c.name = res.data.data.name
								}
							})
						}
					})
					.catch(err => {
						console.log(err);
					})
			}
		},
		clickLogout() {
			let url = this.$params.host + this.$params.action_logout

			let data = {
				token: app.globalData.token
			}
			this.$request.postParam(url, data, res => {
				uni.showToast({
					title: res.message,
					icon: 'none'
				});
				if (res.success) {
					this.authorized = false
					app.globalData.avatar = "/static/icons/default_user.png"
					app.globalData.type = 1
					app.globalData.nickName = ""
					app.globalData.userName = ""
					app.globalData.token = ""
					app.globalData.email = ""
					this.$refs.login.show()
				}
			}, () => {})
		}
	}
	}
</script>

<style>
	@import url("profile.css");
</style>
